<template>
    <div>
        <div>
            <el-form :model="formParam" label-width="90px" :inline="true">
                <el-form-item label="仓库：">
                    <el-select v-model="formParam.depotId" placeholder="选择仓库" clearable filterable multiple
                        collapse-tags>
                        <el-option v-for="item in depot" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品信息：">
                    <el-input v-model="formParam.name" placeholder="条码/名称/规格/型号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findPage">查询</el-button>
                    <el-button @click="exportBtn">
                        <el-icon class="el-icon--left">
                            <Download />
                        </el-icon>
                        导出
                    </el-button>
                </el-form-item>
            </el-form>

        </div>
        <div>
            <el-table :data="page.records" ref="tableRef" border show-summary :summary-method="getSummaries" stripe
                max-height="489px" v-loading="loading">
                <el-table-column type="index" label="#" align="center" width="60" />
                <el-table-column v-for="col in tableHeader" :prop="col.prop" :key="col.id" :label="col.label"
                    :width="col.width" :sortable="col.sortable">
                </el-table-column>
            </el-table>
        </div>

        <div>
            <Pagination :current="page.current" :page-size="page.size" :total="page.total" @change=""
                @update:pageSize="sizeChange" @update:current="currentChange" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { exportTable } from '@/utils/xlsx';
import { getStokeWarningReport } from '@/components/material_bill_detail/js/getTableHead'
import request from '@/api/request';

import Pagination from '@/components/pagination/Index.vue'

const tableRef = ref(null)

const loading = ref(false)

let formParam = ref({})
let depot = ref([])
let tableHeader = ref([])

const page = ref({
    current: 1,
    size: 5,
    pages: 1,
    total: 1,
    records: null
});


const findPage = async () => {
    loading.value = true

    let depotId = []
    if (formParam.value.depotId) {
        depotId = formParam.value.depotId.join(',')
    }

    request.get('report/findStockWarning', {
        params: {
            depotId,
            name: formParam.value.name,
            categoryId: formParam.value.categoryId,
            current: page.value.current, size: page.value.size
        }
    }).then(resp => {
        page.value = resp.data

    })
    setInterval(loading.value = false, 20000);
}

const findDepotByTenantId = async () => {
    await request.get("depot/findDepotByTenantId")
        .then(resp => {
            depot.value = resp.data
        })
}



onMounted(() => {
    findDepotByTenantId()
    getTableHead()

    findPage()
})

/**
 * 设置表尾合计
 * @param param 表格数据
 */

const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "合计";
            return;
        }
        if (Array.isArray(data)) {
            const values = data.map((item) => Number(item[column.property]));
            // 想合并哪些列就在这里指定
            if (column.property === "lastMonthNumber" || column.property === "storageNumber" ||
                column.property === "backNumber" || column.property === "monthNumber" || column.property === "money"
            ) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
            }
        }
    });
    return sums;
}

const exportBtn = () => {
    exportTable(tableRef, '进销存统计报表')
}

const getTableHead = () => {
    tableHeader.value = getStokeWarningReport()
}

const sizeChange = (pageSize) => {
    page.value.size = pageSize;
    findPage()
}

const currentChange = (pageCurrent) => {
    page.value.current = pageCurrent;
    findPage()
}

</script>

<style scoped>
.el-select {
    width: 250px;
}

.el-input {
    width: 250px;
}
</style>
